<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/detail_list.css" rel="stylesheet" />
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
	</head>

	<body>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<script src="js/mui.js"></script>
				<script type="text/javascript">
					mui.init()
				</script>
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
					<h1 class="mui-title">所有消费记录</h1>
				</header>
				<div class="mui-content">
					<div class="search">
						<div class="mui-input-row mui-search">
							<input type="search" id="searchInput" onkeyup="enterSearch(event)" class="mui-input-clear" placeholder="输入类型、时间、备注进行查询">
						</div>
					</div>
					<p style="font-size: 15px; text-align: center;">注意</p>
					<p style="font-size: 12px; text-align: center; margin-top: -15px;">时间仅限2019-1至2024-12,格式如2020-1或者2020-01</p>
					<p style="font-size: 10px; text-align: center; margin-top: -15px;">类型仅限收入、 借出、 餐饮、 通讯、 娱乐、 购物、 交通、杂项、 全部</p>
					<hr >
					<div class="list" v-cloak>
						<label v-if="count != ''">总共{{count}}条记录</label>
						<div class="content" v-bind:id="x.detail_id" v-for="x in detail_list">
							<div class="account a">{{x.account.account_name}}&nbsp;&nbsp;&nbsp;{{x.account.account_num}}</div>
							<div class="type b">{{x.detail_type}}</div>
							<div class="num b">{{x.detail_num}}</div>
							<div class="time b">{{x.time.split('.')[0].split('T')[0]}}&nbsp;&nbsp;{{x.time.split('.')[0].split('T')[1]}}</div>
						</div>
						<br>
						<div style="text-align: center;" class="page">
							<button v-if="priv" v-bind:name="priv" id="priv" onclick="priv(this.name)">上一页</button>
							<button v-if="next" v-bind:name="next" id="next" onclick="next(this.name)">下一页</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		<script type="text/javascript">
			app = new Vue({
			     el:'.list',
			     data:{
			        detail_list: '',
					count: '',
					next: '',
					priv: '',
			     },
			});
			
			
			function priv(val){
				if(val.length == 0){
					mui.toast('已经是第一页了')
					return
				}
				list(val)
			}
			
			function next(val){
				if(val.length == 0){
					mui.toast('已经是最后一页了')
					return
				}
				// mui.alert(val)
				list(val)
			}
			
			// 给记录加事件
			function getRadioRes(className){
				var rdsObj = document.getElementsByClassName(className);
				var checkVal = null;
				for(i=0; i<rdsObj.length;i++){
					rdsObj[i].addEventListener('tap',function(){
						var ids = this.id
						mui.openWindow({
							url:'one_detail.html',
							id:'one_detail.html',
							extras:{
								de_id:ids,
							},
						})
					})
				}
			};
			// 查询
			function enterSearch(event){
				if(event.keyCode == 13) {//用户点击回车的事件号为13
					var keyword = document.getElementById('searchInput').value.trim();
					// 预计用户输入的元素
					if(keyword.length==0){
						mui.toast('请输入字符再进行搜索')
						return
					}
					var reg1 = /^20[1-2][0-9]-[0-9][0-9]?$/
					var info = ''
					var times = ''
					var type = ''
					if(['收入', '借出', '餐饮', '通讯', '娱乐', '购物', '交通', '杂项', '全部'].includes(keyword)){
						var type = keyword
						my_search(type, times, info)
						return
					}else if(reg1.test(keyword)){
						var times = keyword
						my_search(type, times, info)
						return
					}else{
						var info = keyword
						my_search(type, times, info)
						return
					}
				}
			}
			// 查找函数
			function my_search(type, times, info){
				mui.ajax(localStorage.getItem('request_url')+ "cost/user/search_detail/?token="+localStorage.getItem('uid'), {
				    data:"token=" + localStorage.getItem('uid') + "&type=" + type + "&times=" + times + "&info=" + info,
				    dataType:'json',  
				    type:'POST',  
				    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
				    timeout:2000,  
				    success:function show(e){
						// 信息总条数
						app.count = e.data.count
						// 上一页
						app.priv = e.data.previous
						// 下一页
						app.next = e.data.next
						// 数据
						app.detail_list = e.data.results
						if(e.data.length ==0){
							mui.toast('😐小主这里空空如也哦~')
						};
						// 延迟加事件
						setTimeout(function(){
							getRadioRes('content');
							mui.toast('😃同步完成...');
						},1500)
					},  
				    error:function(xhr,type,errorThrown){
						var rdata = JSON.parse(xhr.responseText)
						mui.toast(rdata.msg);
						mui.toast(rdata.data.rule,{duration:2000,type:'div'})
				    }  
				});
			}
			
			
			
			window.addEventListener('customEvent', function(event) {
			    // mui.fire()传过来的额外的参数，在event.detail中；
			    var detail = event.detail;
			    // var param = detail.param;
			    // 执行相应的ajax或者操作DOM等操作
				myRefresh();
			});
			
			// 重构back函数
			var old_back = mui.back;
			mui.back = function() {
			    // 获取目标口窗口对象
			    // var target = plus.webview.getWebviewById('one_account.html');
			    var target = plus.webview.getWebviewById("detail_info.html");
			    // 执行相应的事件
			    mui.fire(target, 'customEvent', {});
				// mui.fire(target2, 'customEvent', {});
			    // 执行关闭
			    old_back();
			};
			
			// 下拉刷新
			mui.init({
				pullRefresh : {
					container:"#pullrefresh",
					down: {
						height:50,
						style:'circle',
						auto:true,
						callback:myRefresh
					}
				}
			});
			// 下拉刷新
			function myRefresh(){
				mui.toast('😐同步数据中...请勿操作', {duration: 1000,});
				setTimeout(function(){
					url = localStorage.getItem('request_url')+ "cost/user/show_my_detail/?token="+localStorage.getItem('uid')
					list(url)
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				},500)
			};
			
			function list(url){
				mui.ajax(url, {
				    data:"token=" + localStorage.getItem('uid'),
				    dataType:'json',  
				    type:'POST',  
				    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
				    timeout:2000,  
				    success:function show(e){
						// mui.alert(JSON.stringify(e))
						// 信息总条数
						app.count = e.data.count
						// 上一页
						app.priv = e.data.previous
						// 下一页
						app.next = e.data.next
						// 数据
						app.detail_list = e.data.results
						if(e.data.length ==0){
							mui.toast('😐小主这里空空如也哦~')
						};
						// 延迟加事件
						setTimeout(function(){
							getRadioRes('content');
							mui.toast('😃同步完成...');
						},1500)
					},  
				    error:function(xhr,type,errorThrown){
						mui.toast('同步失败...下拉刷新');
				    }  
				});
			}
			
		</script>
		
	</body>

</html>
